<template>
  <div v-if="commentChild" class="commentText21">
    <div class="commentText2" v-for="(item,index) in commentChild" :key="index">
      <div class="comment_text">
        <div class="comment_text_l">
          <img src="../assets/user.jpg" alt />
        </div>
        <div class="comment_text_r">
          <div>
            <span v-if="item.userinfo && item.userinfo.name">{{item.userinfo.name}}</span>
            <span v-else>偷了个橘子</span>
            <span>{{item.comment_date}}</span>
          </div>
          <div v-if="!flag" class="pulishPost">
            {{item.comment_content}}
            <span
              class="pulish"
              @click="ReplyClick(item.comment_id)"
            >回复</span>
          </div>
          <div v-else class="pulishPost">
            回复:&nbsp;&nbsp;&nbsp;
            <a style="color:rgb(100, 205, 248)">{{item.parent_user_info.name}}</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div style="margin:1.389vw 2.778vw;">
              {{item.comment_content}}
              <span
                class="pulish"
                @click="ReplyClick(item.comment_id)"
              >回复</span>
            </div>
          </div>
        </div>
      </div>
      <comment-text2 :commentChild="item.child1" style="padding:0;" flag="true"  @postClick="postClick1(item.comment_id)"></comment-text2>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentText2",
  props: ["commentChild", "flag"],
  methods: {
    ReplyClick(id) {
      this.$emit("postClick", id);
    },
    postClick1(id){
      this.ReplyClick(id)
      this.$emit('replyclick',id)
    }
  }
};
</script>

<style lang="less" scoped>
.commentText21 {
  padding: 1.389vw 8.333vw;
}
.comment_text {
  padding: 2.778vw 3.333vw;
  display: flex;

  .comment_text_l {
    width: 9vw;
    height: 9vw;
    margin-right: 2.778vw;
    img {
      display: block;
      width: 9vw;
      height: 9vw;
      border-radius: 50%;
      box-shadow: 0 0 10px rgb(167, 164, 164);
    }
  }
  .comment_text_r {
    flex: 1;
    div:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 2.778vw;
      span:nth-child(1) {
        font-size: 4.444vw;
        font-weight: 550;
        color: rgb(202, 3, 3);
      }
      span:nth-child(2) {
        font-size: 3.611vw;
        color: #aaa;
      }
    }
    div:nth-child(2) {
      flex: 1;
      font-size: 3.889vw;
    }
  }
}
.pulishPost {
  position: relative;
  .pulish {
    position: absolute;
    right: 4.167vw;
    color: rgb(30, 194, 98);
  }
}
</style>